<template>
    <div class="project-view">
        <student-header/>
        <n-space vertical>
            <n-layout has-sider>
                <n-layout-sider
                    bordered
                    collapse-mode="width"
                    :collapsed-width="64"
                    :width="240"
                    :collapsed="collapsed"
                    show-trigger
                    @collapse="collapsed = true"
                    @expand="collapsed = false"
                >
                    <n-menu
                        v-model:value="student.menu.value"
                        @update:value="clickMenu"
                        :collapsed="collapsed"
                        :collapsed-width="64"
                        :icon-size="25"
                        :collapsed-icon-size="35"
                        :options="menuOptions"
                    />
                </n-layout-sider>
                <n-layout>
                    <router-view/>
                </n-layout>
            </n-layout>
        </n-space>
    </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import StudentHeader from "@/components/student/StudentHeader.vue";
import {NIcon} from "naive-ui";
import {AnalyticsReference, ColumnDependency, Branch, DataViewAlt} from '@vicons/carbon'
import router from "@/router";
import {useStudentStore} from "@/stores/student";
import {SERIES} from "@/assets/server";

const route = useRoute()
const student = useStudentStore()

// 是否折叠 默认不折叠
const collapsed = ref(false)

// 渲染icon图标
function renderIcon(icon) {
    return () => h(NIcon, null, {default: () => h(icon)});
}

const menuOptions = computed(() => {
    let array = [
        {
            label: "执行任务",
            key: "Execute",
            // disabled: student.menu.enabled || !student.taskState.task_analysis_status,
            icon: renderIcon(Branch)
        },
        {
            label: "查看成绩",
            key: "Grade",
            disabled: student.menu.enabled || !student.taskState.task_analysis_status,
            icon: renderIcon(DataViewAlt)
        },
    ]
    if (SERIES === "third") {
        array = [
            {
                label: "查看任务",
                key: "StudentTask",
                icon: renderIcon(ColumnDependency)
            }, {
                label: "分析任务",
                key: "Analysis",
                disabled: student.menu.enabled,
                icon: renderIcon(AnalyticsReference),
            },
            ...array
        ]
    }
    return array;
})

const clickMenu = (key) => {
    router.push({
        name: key,
        query: route.query
    })
}

student.setMenuValue(route.name)
student.setTaskState(route.query.projectId, route.query.taskId)
</script>

<style scoped lang="less">
</style>